import { getHospital, getUpdateStatusById } from "@/api/hosp";
import { useCallback, useEffect, useState } from "react";
import {
    Form,
    Space,
    Table,
    Button,
    Switch,
    Cascader,
    Input,
    Select,
} from "antd";
import { getFindByParentId } from "@/api/cmn";
import { useNavigate } from "react-router-dom";
import { SearchOutlined } from "@ant-design/icons";

export default function HospitalList() {
    const navigate = useNavigate();
    // 当前页数
    const [current, setCurrent] = useState(
        localStorage.getItem("current")
            ? (localStorage.getItem("current") as any) / 1
            : 1
    );
    // 总条数
    const [total, setTotal] = useState(1);
    // 医院状态列表
    const [hospitalList, setHospitalList] = useState<any[]>([]);
    // 加载医院列表的loading
    const [loading, setLoading] = useState(false);
    // 获取医院列表的接口
    const getHospitalAsync = async (page = 1, pageSize = 5) => {
        setLoading(true); // 加载中
        const result: any = await getHospital(
            page,
            pageSize,
            form.getFieldsValue(true)
        );
        setLoading(false); // 加载完毕
        // 设置医院列表
        setHospitalList(result.content);
        // 设置总条数
        setTotal(result.totalElements);
        // 设置当前页
        setCurrent(result.pageable.pageNumber + 1);
        localStorage.setItem("current", String(result.pageable.pageNumber + 1));
    };
    useEffect(() => {
        // 调用医院列表接口
        getHospitalAsync(current);
    }, []);

    // 单个省市区数据
    interface ProvinceItem {
        id: number;
        name: string; // 名称
        value: string; // 选中的值
    }
    // 省市区数据列表
    type ProvinceList = ProvinceItem[];

    // 定义省市区数据
    const [provinceList, setProvinceList] = useState<ProvinceList>([]);
    const [cityList, setCityList] = useState<ProvinceList>([]);
    const [districtList, setDistrictList] = useState<ProvinceList>([]);
    const [hostypeList, setHostypeList] = useState<ProvinceList>([]);
    const [form] = Form.useForm();
    const { Option } = Select;
    const getAreaList = useCallback(async (id: number, callback: Function) => {
        const options: any = await getFindByParentId(id);
        callback(options);
    }, []);
    useEffect(() => {
        getAreaList(86, setProvinceList);
        getAreaList(10000, setHostypeList);
    }, []);

    const onChange = (value: any) => {
        console.log(value);
    };
    return (
        <div>
            <Form form={form} layout="inline">
                <Form.Item name="provinceCode" style={{ width: 140 }}>
                    <Select
                        placeholder="请选择省"
                        onChange={(id: number) => {
                            getAreaList(id, setCityList);
                            // 将选中的市和区值清空
                            form.setFieldsValue({
                                cityCode: undefined,
                                districtCode: undefined,
                            });
                        }}
                    >
                        {provinceList.map((provinceItem) => {
                            return (
                                // value代表option选中的值
                                <Option value={provinceItem.value} key={provinceItem.id}>
                                    {provinceItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name="cityCode" style={{ width: 140 }}>
                    <Select
                        placeholder="请选择市"
                        onChange={(id: number) => {
                            getAreaList(id, setDistrictList);
                            // 将选中的市和区值清空
                            form.setFieldsValue({
                                districtCode: undefined,
                            });
                        }}
                    >
                        {cityList.map((cityItem) => {
                            return (
                                <Option value={cityItem.value} key={cityItem.id}>
                                    {cityItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>

                <Form.Item name="districtCode" style={{ width: 140 }}>
                    <Select placeholder="请选择区">
                        {districtList.map((districtItem) => {
                            return (
                                <Option value={districtItem.value} key={districtItem.id}>
                                    {districtItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>

                <Form.Item name="hosname" style={{ width: 140 }}>
                    <Input placeholder="医院名称" />
                </Form.Item>

                <Form.Item name="hoscode" style={{ width: 140 }}>
                    <Input placeholder="医院编号" />
                </Form.Item>

                <Form.Item name="hostype" style={{ width: 140 }}>
                    <Select placeholder="医院类型">
                        {hostypeList.map((hostypeItem) => {
                            return (
                                <Option value={hostypeItem.value} key={hostypeItem.id}>
                                    {hostypeItem.name}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>

                <Form.Item name="status" style={{ width: 140 }}>
                    <Select placeholder="医院状态">
                        <Option value={0}>未上线</Option>
                        <Option value={1}>已上线</Option>
                    </Select>
                </Form.Item>

                <Form.Item style={{ marginBottom: 20 }}>
                    <Space><span onCanPlay={() => { console.log("s") }}></span>
                        <Button
                            type="primary"
                            htmlType="submit"
                            icon={<SearchOutlined />}
                            className="hospital-btn m"
                            onClick={() => {
                                getHospitalAsync();
                            }}
                        >
                            查询
                        </Button>
                        <Button
                            onClick={() => {
                                form.resetFields();
                                // 将城市和区的数据清空
                                setCityList([]);
                                setDistrictList([]);
                                getHospitalAsync();
                            }}
                        >
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            <Table
                bordered
                // 指定表格当中每一行的key
                rowKey={"id"}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(rows, record, index) {
                            // console.log(rows,record);
                            return (current - 1) * 5 + index + 1;
                        },
                    },
                    {
                        title: "医院名称",
                        dataIndex: "hosname",
                        align: "center",
                    },
                    {
                        title: "医院编号",
                        dataIndex: "hoscode",
                        align: "center",
                    },
                    {
                        title: "医院LOGO",
                        dataIndex: "logoData",
                        align: "center",
                        render(logoData) {
                            return (
                                <img
                                    width={60}
                                    src={"data:image/jpeg;base64," + logoData}
                                    alt=""
                                />
                            );
                        },
                    },
                    {
                        title: "是否上线",
                        // dataIndex:"status",
                        align: "center",
                        render(rows) {
                            return (
                                <Switch
                                    onChange={async () => {
                                        // 如果当前状态为1，那么设置为0，如果为0，设置为1
                                        const status = rows.status === 1 ? 0 : 1;
                                        await getUpdateStatusById(rows.id, status);
                                        setHospitalList(
                                            hospitalList.map((item: any) => {
                                                if (item.id === rows.id) rows.status = status;
                                                return item;
                                            })
                                        );
                                    }}
                                    checked={rows.status === 1}
                                ></Switch>
                            );
                        },
                    },
                    {
                        title: "医院等级",
                        dataIndex: "param",
                        align: "center",
                        render(param) {
                            return param.hostypeString;
                        },
                    },
                    {
                        title: "医院地址",
                        dataIndex: "param",
                        align: "center",
                        render(param) {
                            return param.fullAddress;
                        },
                    },
                    {
                        title: "创建时间",
                        dataIndex: "createTime",
                        align: "center",
                    },
                    {
                        title: "操作",
                        // dataIndex: "hosname",
                        fixed: "right",
                        align: "center",
                        render(rows) {
                            return (
                                <Space>
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            navigate("/hospital/show/" + rows.id);
                                        }}
                                    >
                                        查看
                                    </Button>

                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            navigate("/hospital/department/" + rows.hoscode);
                                        }}
                                    >
                                        排班
                                    </Button>
                                </Space>
                            );
                        },
                    },
                ]}
                scroll={{
                    x: 1500,
                }}
                pagination={{
                    // 每页显示的第数
                    pageSize: 5,
                    // 指定页数
                    current,
                    // 记录的总条数
                    total,
                    onChange: getHospitalAsync,
                    // onChange(page,pageSize){
                    //     console.log(page,pageSize);
                    //     getHospitalAsync(page,pageSize)
                    // }
                }}
                dataSource={hospitalList}
                loading={loading}
            ></Table>
        </div>
    );
}
